import React, { MutableRefObject, RefObject } from 'react'
import { NoticeBar} from 'antd-mobile'
import "./index.less"
import { useState,useCallback,useEffect,useRef } from 'react'
import { debounce } from "lodash";
import MyDate from "../../package/datePicker"
interface userData {
    num:string,
    username:string,
    password:string,
    date:string,
    acc:string
}
interface userAccList  {
        num:string,
        value:string
        }
const now = new Date()
export default function Test() {
    //数据存储
    const [userData,setUserData] = useState<userData>({
        num:'',
        username:'',
        password:'',
        date:'',
        acc:''
    })
    const [userAccList,setUserAcc] = useState<userAccList[]>([{
        num:'请选择',
        value:'请选择'
    }])
    const username= useRef<HTMLInputElement>(null)
    const usernum= useRef<HTMLInputElement>(null)
    const password= useRef<HTMLInputElement>(null)
    const [userPassword,setPassword] = useState('')
    const [userAcc,setAcc] = useState('@111')
    const[notice,setnotice] = useState('demoLongTextdemoLongTextdemoLongTextdemoLongTextdemoLongTextdemoLongTextdemoLongTextdemoLongTextdemoLongTextdemoLongTextdemoLongTextdemoLongTextdemoLongText')
    // 功能函数
    const login = (query:any) =>{
        // console.log(`Querying for ${query}`)
        // console.log('login')
        // console.log(username.current!.value,'username')
        // console.log('')
        setUserData({
            ...userData,
            num:usernum.current!.value,
            username:username.current!.value,
            password:password.current!.value,
            acc:userAcc
        })
}
//获取密码
    const getPassword = (e:React.ChangeEvent<HTMLInputElement>) => {
        console.log(e,e.target.value,'e')
        setPassword(e.target.value)
    }
//监控userData更新
useEffect(() => {
    if(window.Notification){
        // 桌面通知的逻辑
        console.log('支持桌面通知')
      }
    console.log(userData,'userData')
}, [userData])
    const delayedQuery = useCallback(debounce(q => login(q), 1000, {
            /**
             * @func
             * @desc 登录函数，1秒最多触发1次
             * @param {any} query - query暂时为空
            * @return – 返回值
            */
        'leading': true,
        'trailing': false
      }), []);
      const getAccList =()=> {
        setUserAcc([
            {
            num:'@111',
            value:'@111'
        },
        {
            num:'@222',
            value:'@222'
        },
        {
            num:'@333',
            value:'@333'
        }])
      }
      const changeAccList = (e:React.ChangeEvent<HTMLSelectElement>) => {
          console.log(e,'e')
        console.log(e.target.value,'select->>>>>>>>>>>>>>>>value')
        setAcc(e.target.value)
        console.log(userAcc,'userAcc')
      }
      useEffect(() => {
        const myBodyOnFocus = () => {
            console.log('focus事件')
            myBody.setAttribute('style', 'height:'+'100%');
            myBody.setAttribute('style', 'height:'+originalHeight+'px;');
        }
        const myBodyOnBlur = () => {
            console.log('blur事件')
            myBody.setAttribute('style', 'height:'+originalHeight+'px;');
            myBody.setAttribute('style', 'height:'+'100%');
        }
        const originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
        localStorage.setItem('minHeight',originalHeight.toString())
        const myBody:any = document.querySelector('body')
        const myFocus = document.querySelectorAll('input')
        myFocus.forEach(element => {
            element.addEventListener("focus", myBodyOnFocus);
            element.addEventListener("blur", myBodyOnBlur);
        });
      })
    return (
        <div className="login">
            {
                notice && <div className="noticeBar">
                <NoticeBar
                content={notice}
                color='info'  delay={3000}/>
                </div>
            }
            <header>
                <img src="../../../static/assets/img/logo.png" alt="" />
            </header>
            <main>
                <section className="serviceCode">
                <input type="text" placeholder="服务识别码" ref={usernum}/>
                </section>
                <section className="username">
                <input type="text" placeholder="账号" ref={username}/>
                </section>
                <section className="password">
                <input type="password" placeholder="密码" ref={password}
                onChange={(e)=>getPassword(e)} value={userPassword}
                />
                </section>
                <section className="accList">
                    <span>账套1</span>
                <select
                onFocus={getAccList}
                onChange={(e)=>changeAccList(e)}
                >
                    {/* <option value="0" selected="selected" style="display: none;"></option> */}
                    {
                        userAccList.map(item=>
                            <option value={item.value}
                            key={item.value}
                            >{item.num}</option>
                            )
                    }
                </select>
                </section>
                <section className='datePick'>
               <MyDate
               ></MyDate>
                </section>
            </main>
            <footer>
                <div
                onClick={delayedQuery}
                >
                    登录
                </div>
            </footer>
        </div>
    )
}
